<template>
  <div class="container">
    <div class="header">热门推荐</div>
    <div class="body">
      <ul>
        <router-link
          tag="li"
          :to="'/detail/' + item.id"
          class="border-bottom"
          v-for="item in recommendlist"
          :key="item.id"
        >
          <div class="img">
            <img :src="item.imgUrl" />
          </div>
          <div class="box">
            <div class="title">{{item.title}}</div>
            <div class="detail">{{item.address}}</div>
            <button class="buttom">￥ {{item.price}}</button>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Recommend",
  props: ["recommendlist"],
  data() {
    return {};
  },
};
</script>
<style lang="stylus" scoped>
@import '~style/mixins.styl'

.header
  margin-top 0.2rem
  padding-left 0.2rem
  height 0.44rem
  text-align left
  line-height 0.44rem
  background-color #dddddd

.body
  li
    margin-bottom 0.1rem

    .img
      float left
      width 1.3rem
      height 1.3rem

      img
        width 100%
        height 100%

    .box
      padding-top 0.1rem
      padding-left 0.1rem
      display flex
      flex 1
      flex-direction column
      justify-content space-between
      height 1.3rem
      text-align left

      .title
        // margin-top .1rem
        height 0.4rem
        line-height 0.4rem
        font-weight bold
        ellipsis()

      .detail
        // margin-top .15rem
        font-size 0.22rem
        color #666666
        ellipsis()

      .buttom
        width 1.5rem
        height 0.4rem
        border-radius 0.12rem
        background-color rgb(62, 155, 255)
        font-size 0.2rem
</style>